<template>
<div class="pdf-preview">
    <el-dialog
    title="PDF预览"
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="handleClose"
    class="pdf-dialog"
    top="3vh"
    :append-to-body="true"
    >
    <div class="pdf-container">
        <iframe 
        :src="pdfViewerUrl"
        frameborder="0" 
        width="100%" 
        height="100%"
        ></iframe>
    </div>
    </el-dialog>
</div>
</template>

<script>
export default {
name: 'PdfPreview',
props: {
    visible: {
    type: Boolean,
    default: false
    },
    fileUrl: {
    type: String,
    default: ''
    }
},
computed: {
    dialogVisible: {
    get() {
        return this.visible;
    },
    set(val) {
        this.$emit('update:visible', val);
    }
    },
    pdfViewerUrl() {
    if (!this.fileUrl) return '';
    // 使用PDF.js的在线预览服务
    return `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(this.fileUrl)}`;
    }
},
methods: {
    handleClose(done) {
    this.$emit('update:visible', false);
    if (done) done();
    }
}
}
</script>

<style lang="less" scoped>
.pdf-preview {
.pdf-dialog {
    :deep(.el-dialog) {
    margin-top: 3vh !important;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    
    .el-dialog__body {
        flex: 1;
        padding: 10px;
        height: calc(90vh - 100px);
    }
    }
}

.pdf-container {
    height: 100%;
    width: 100%;
    
    iframe {
    min-height: 75vh;
    }
}
}
</style>